<template>
  <div class="emp" >
    <div style="margin-left:-8px">
   <div class="emp_title" style="display:flex">
     <span class="emp_title_name">员工姓名:</span>
     <el-input v-model="name" placeholder="请输入内容"></el-input>
     <el-button @click="query" class="emp_title_btn" type="info">查询</el-button>
     <el-button @click="addEmp" class="emp_title_qur" type="primary">+添加员工</el-button>
   </div>

   <!-- 表格 -->

           <el-table
          :data="tableData" border  class="emp_table" >

          <el-table-column
            align="center"
            prop="name"
            label="员工姓名"
            width="150px"

          >
          </el-table-column>

          <el-table-column align="center" label="账号"  prop="username" width="160px">

          </el-table-column>

          <el-table-column align="center" label="性别"  prop="sex" width="100px">
            <template slot-scope="scope">
           <span v-if="scope.row.sex==='1'"> 男</span>
            <span v-else > 女</span>
           </template>

          </el-table-column>

          <el-table-column
            align="center"
            prop="phone"
            label="手机号"
            width="180px"   >

          </el-table-column>
          <el-table-column align="center" prop="stataus" label="账号状态" width="100px">
         <template slot-scope="scope">
           <span v-if="scope.row.status===1"><span class="table_status2">●</span>  启用</span>
           <span v-else><span class="table_status1">●</span> 禁用</span>
           </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="updateTime"
            label="最后操作时间"
            width="210px"
          >
          <template slot-scope="scope">
              {{scope.row.updateTime ? scope.row.updateTime.replace('T',' '):''}}
          </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="244px">
             <template slot-scope="scope">
             <div v-if="scope.row.status===1">
            <el-button style="border:none;color:rgb(64,158,255)" @click="editChandel( scope.$index)"  size="mini"  >修改</el-button >

            <el-button  style="border:none;color:rgb(245,108,108)" @click="disablehandel( scope.$index)"  size="mini">禁用</el-button>
            <el-button style="border:none;color:rgb(245,108,108)" @click="deletehandel( scope.$index)"  size="mini">删除</el-button>
           </div>

           <div v-if="scope.row.status===0">
            <el-button  style="border:none;color:rgba(43, 41, 41, 0.322)" @click="editChandel( scope.$index)"  size="mini" :disabled="true" key="f" >修改</el-button >
            <el-button style="border:none;color:orange" @click="startChandel( scope.$index)"  size="mini">启用</el-button>
           <el-button  style="border:none;color:rgba(43, 41, 41, 0.322)" @click="deletehandel( scope.$index)"  size="mini" :disabled="true" key="d" >删除</el-button>
           </div>

           </template>

          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
         <el-pagination
          background
          layout="total,sizes,prev,pager,next,jumper"
          :current-page="page"
           :page-sizes="[5, 10]"

          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total"
            ></el-pagination>
            </div>
         <AddEmp :dialogVisible='dialogVisible'></AddEmp>
         <EditEmp :dialogVisible='dialogVisible'></EditEmp>

  </div>
  </div>
</template>

<script>
import Bus1 from '@/utils/EventBus'
import AddEmp from '@/components/main/emp/addEmp.vue'
import EditEmp from '@/components/main/emp/editEmp.vue'
import { page, statusEmp, deleteEmp } from '@/api/emp'

export default {
  name: 'empIndex',
  components: {
    AddEmp,
    EditEmp
  },
  data () {
    return {
      name: '',
      dialogVisible: false,
      tableData: [
        {
          id: 1,
          name: '小明',
          username: 'xiaoming',
          sex: '1',
          phone: 17386083292,
          status: 1,
          updateTime: '2024-02-22 23:32:40'
        },
        {
          id: 2,
          name: '管理员',
          username: 'admin',
          sex: '2',
          phone: 17386083293,
          status: 0,
          updateTime: '2024-02-22 23:44:41'
        }
      ],
      /* 分页 */

      page: 1,
      pageSize: 10,

      total: 0
    }
  },
  created () {
    this.initpage()
  },
  methods: {

    addEmp () {
      // 新增员工,打开弹窗
      Bus1.$emit('sendMsg1', !this.dialogVisible)
    },

    // 根据名字来查询员工
    query () {
      this.initpage()
    },

    // 分页查询
    async initpage () {
      const res = await page(this.name, this.page, this.pageSize)
      // console.log(res.data.records)
      this.tableData = res.data.records

      this.total = res.data.total
    },

    // 修改员工信息
    editChandel (index) {
      // 新增员工,打开弹窗
      const id = this.tableData[index].id

      Bus1.$emit('edit', !this.dialogVisible, id)

      // 根据索引查找员工ID
    },
    disablehandel (index) {
      // 禁用员工
      this.status(index, 0, '恭喜你，账号禁用成功', '抱歉，账号禁用失败')
    },
    startChandel (index) {
      this.status(index, 1, '恭喜你，账号启用成功', '抱歉，账号启用失败')
    },

    // 删除员工
    async deletehandel (index) {
      const id = this.tableData[index].id

      this.$confirm('确认删除员工吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteEmp(id).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，删除成功')
            this.initpage()
          } else {
            this.$message.error('很遗憾，删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    handleSizeChange (val) {
    // 更新当前页码展示数量
      this.pagelimit = val
      this.pageSize = val
      this.initpage()
    },
    handleCurrentChange (val) {
    // 更新当前页码是第几页
      this.page = val
      this.initpage()
    },
    /* 封装账号开启禁用方法 */
    status (index, status, ok, err) {
      const id = this.tableData[index].id

      this.$confirm('确认修改状态码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        statusEmp(status, id).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success(ok)
            this.initpage()
          } else {
            this.$message.error(err)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    }

  }
}
</script>

<style lang="less" scoped>
.emp{

 height: 720px;

   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);

  padding-right: 18px;
  padding-left: 30px;

  margin-left: 20px;
  margin-top: 20px;
}
.emp_title{
  padding-top: 30px;

  .emp_title_name{
    width: 80px;
    line-height: 40px;
  }
.el-input{
    width: 130px;
  }
  .emp_title_btn{
    width: 70px;
    margin-left: 30px;
    background-color: black;

  }
  .emp_title_qur{

    color: black;
    background-color: orange;
    border: none;
    margin-left: 720px;
  }
}

.emp_table{
  margin-top: 40px;

}
// 分页
.pagination{
  padding-top: 10px;
  margin-left: 280px;

}
// 表格状态禁用
.table_status1{
  color: rgba(68, 61, 61, 0.61);
}
// 表格状态启用
.table_status2{
  color: green;
}
/* /deep/ .btn-next{
  width: 50px;
} */
/deep/ .el-icon.el-icon-arrow-right{
  margin-left: 5px;
}

</style>
